<div class="container-dualListBox">
  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
    cdkDropList
    #userList="cdkDropList"
    [cdkDropListData]="availableItems.totalItems"
    [cdkDropListConnectedTo]="[memberList]"
    (cdkDropListDropped)="drop($event)"
    >
   <div class="list-title" *ngIf="title1">{{title1}}</div>
   <div *ngFor="let item of availableItems.totalItems" cdkDrag 
      class="draggable"
      (cdkDragStarted)="onDragStart($event)"
      [ngClass]="{ chosen: availableItems.isSelected(item,1) }" 
      (mousedown)="availableItems.mouseDown(item, $event)"
      (mouseup)="availableItems.mouseUp(item, $event)">
      <mat-list *ngIf="templateItem;else noTemplateItem" >
        <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item}"></ng-container>
      </mat-list>
      <ng-template #noTemplateItem>
        {{item.name}}
      </ng-template>
    </div>
  </div>
  <div class="container-buttons">
    <div class="" (click)="select()" [style.margin-bottom.px]="5">
      <div *ngIf="templateArrowRight;else arrowRight">
        <ng-container [ngTemplateOutlet]="templateArrowRight">
        </ng-container>
      </div>
      <ng-template #arrowRight>
        <button mat-flat-button class="dual-list-action-btn"> <mat-icon class="arrow">arrow_forward</mat-icon> </button>
      </ng-template>
    </div>
    <div class="" (click)="return()">
      <div *ngIf="templateArrowLeft;else arrowLeft">
        <ng-container [ngTemplateOutlet]="templateArrowLeft">
        </ng-container>
      </div>
      <ng-template #arrowLeft>
        <button mat-flat-button class="dual-list-action-btn"> <mat-icon class="arrow">arrow_back</mat-icon> </button>
      </ng-template>
    </div>
  </div>
  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
    cdkDropList
    #memberList="cdkDropList"
    [cdkDropListData]="selectedItems.totalItems"
    [cdkDropListConnectedTo]="[userList]"
    (cdkDropListDropped)="drop($event)">
    <div class="list-title" *ngIf="title2">{{title2}}</div>
    <div *ngFor="let item of selectedItems.totalItems" cdkDrag 
      class="draggable"
      (cdkDragStarted)="onDragStart($event)"
      [ngClass]="{ chosen: selectedItems.isSelected(item,2) }"
      (mousedown)="selectedItems.mouseDown(item, $event)"
      (mouseup)="selectedItems.mouseUp(item, $event)">
      <mat-list *ngIf="templateItem;else noTemplateItem">
        <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item }"> </ng-container>
      </mat-list>
      <ng-template #noTemplateItem>
        {{item.name}}
      </ng-template>
    </div>
  </div>
</div>
